<template>
    <h3>Leaflet Vue Demo</h3>
    <div class="layout-col">
        <div class="layout">
            <div id="我占领一列"></div>
            <div id="leaflet-map" ref="mapContainer"></div>
            <div id="我也占领一列"></div>
        </div>
        <div id="我占领一行"></div>
    </div>
</template>

<script>
import 'leaflet/dist/leaflet.css'
import L from "leaflet"
import request from "../../utils/request.js";

export default {
    name: "Leaflet",
    data() {

    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            let me = this;
            //加载区县GEO-JSON
            request.get("/api/geo/selectByAreaCode").then((resp) => {
                let geojson = resp.data.data;
                me.initMap(geojson); //初始化地图
                me.loadCameras('')
            })

        },
        initMap(geojson) {
            //中心点
            let center = [geojson[0].centerLat, geojson[0].centerLon];
            //创建地图
            this.map = L.map('leaflet-map', {
                center: center, //中心点
                zoom: this.getZoom(), //初始放大系数
                crs: L.CRS.EPSG4326 //wsg84坐标系
            });
            //地区图层组
            let areaLayer = L.layerGroup();
            this.map.addLayer(areaLayer);
            //区县
            for (let i = 1; i < geojson.length; i++) {
                let geoObject = JSON.parse(geojson[i].geoJson); //服务端返回的是字符串JSON，转换为对象
                //创建一个geoJSON图层加入到地区图层组
                let layer = L.geoJSON(geoObject, {
                    onEachFeature: function (feature, layer) {
                        layer.options.color = '#A2EEFF' //边框颜色
                        layer.options.weight = 1 //边框宽度
                        layer.options.fillColor = '#42DFFC'; //填充色
                        layer.options.fillOpacity = 0.4;//半透明
                    }
                });
                //将当前区县加入区县图层组
                areaLayer.addLayer(layer);

                //////////////////////////////////////
                //在地图上做标记，因为标记有特殊背景，因此使用DivIcon
                //////////////////////////////////////
                //地图标记的标注图标
                let icon = L.divIcon({
                    className: 'marker-div-icon',
                    html: geojson[i].name,
                    iconAnchor: [60, 50] //偏移量，尽量调整到区县的中间
                });
                //标记的坐标
                let markerPos = [geojson[i].centerLat, geojson[i].centerLon];
                //创建标记，加入地图，绑定事件
                L.marker(markerPos, {
                    icon: icon,
                    riseOnHover: true
                }).addTo(this.map)
                    .on('click', function () {//Marker事件
                        console.log(geojson[i])
                        alert('行政区划代码' + geojson[i].areaCode)
                    })
            }
        },

        /**
         * 加载视频设备分布图
         */
        loadCameras(areaCode) {
            if (!this.map) { //地图未初始化
                return;
            }
            //用于存放视频设备图标的图层组
            if (!this.cameraLayers) {
                this.cameraLayers = L.layerGroup().addTo(this.map);
            } else {
                this.cameraLayers.removeAll();//如果已经有设备图标，则清空
            }

            //图标
            let cameraIcon =  L.icon({
                iconUrl: '/src/assets/icon-camera.png',
                iconSize: [40, 40]
            });
            //加载视频
            request.get("/api/camera/selectByGroupAndArea", {params: {areaCode: areaCode}})
            .then((resp) => {
                let cameras = resp.data.data;
                for(let i = 0; i < cameras.length; i++) {
                    L.marker([cameras[i].latitude, cameras[i].longitude], {
                        icon: cameraIcon
                    })
                        .addTo(this.cameraLayers)
                    .on('click', function() {
                        alert('可以在这里控制视频播放' + cameras[i].deviceCode)
                    })
                }

            })
        },

        /**
         * 可以通过不断优化这里的参数，适配不同的分辨率^_^
         * @return {number}
         */
        getZoom() {
            let width = this.$refs.mapContainer.clientWidth;
            if (width < 600) {
                return 9;
            } else if (width < 2000) {
                return 10
            } else {
                return 11
            }

        }

    }
}

</script>
<style>
body .leaflet-control {
    opacity: 0.1;
}

body .marker-div-icon {
    width: 60px !important;
    height: 50px !important;
    background: url("../../assets/marker-1.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 7px;
    text-align: center;
    color: #00f9ff;
}

body .marker-div-icon:hover {
    background: url("../../assets/marker-2.png") no-repeat;
    background-size: 100% 100%;
    color: #FCEE4F;
}

</style>
<style scoped>
h3 {
    color: #fff;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

#leaflet-map {
    border: 1px solid #409eff;
    flex: 3;
}

.leaflet-container {
    background-color: transparent;
}

.layout-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.layout-col >div {
    display: flex;
    flex: 1;
}

.layout {
    flex: 3 !important;
    display: flex;
    flex-direction: row;
}
.layout >div {
    display: flex;
    flex: 1;
}

</style>